<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../../../umd/d3plus-core.full.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

</head>

<body>

</body>

<script>

  var tmap = new d3plus.Treemap()
    .data("../../data.json")
    .groupBy(["group", "item"])
    // .fontFamily("Comic Sans MS")
    .width(600)
    .height(400)
    // .data([
    //   {
    //     id: 'alpha',
    //     value: 29
    //   },
    //   {
    //     id: 'beta',
    //     value: 10
    //   },
    //   {
    //     id: 'gamma',
    //     value: 2
    //   },
    //   {
    //     id: 'delta',
    //     value: 29
    //   },
    //   {
    //     id: 'eta',
    //     value: 25
    //   }
    // ])
    // .groupBy("id")
    .legend(true)
    .sum("value")
    .render();

</script>

</html>
